//自定义指定 v-hasBtn
//控制按钮权限(按钮隐藏或显示)
//https://cn.vuejs.org/v2/guide/custom-directive.html
//https://blog.csdn.net/weixin_44914782/article/details/109239798
//https://www.cnblogs.com/restart77/p/13377239.html

const hasBtnPower = {
    install(Vue, options) {
        // 注册一个全局自定义指令 `v-hasBtn`
        Vue.directive('hasBtn', {
            // 当被绑定的元素插入到 DOM 中时
            //  inserted：被绑定元素插入父节点时调用
            //el：指令所绑定的元素，可以用来直接操作 DOM

            //binding：一个对象，包含以下属性：
            //
            // name：指令名，不包括 v- 前缀。
            // value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为2。
            // oldValue：指令绑定的前一个值，仅在update和 componentUpdated钩子中可用。无论值是否改变都可用。
            // expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
            // arg：传给指令的参数，可选。例如 v-my-directive:foo中，参数为 "foo"。
            // modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为{ foo: true, bar: true }。
            // vnode：Vue 编译生成的虚拟节点。
            //
            // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
            inserted(el, binding, vNode) {
                console.log('当前按钮权限',binding);
                if (!Vue.prototype.$_hasBtn(binding.value)) {
                    console.warn('没有按钮权限',el);
                    el.parentNode.removeChild(el);
                }
            }


        });

        //权限检查方法
        Vue.prototype.$_hasBtn = function (bindVal) {
            let isExist = false;


            //sessionStorage中带了所有页面的按钮权限信息
            let permDataInfo = JSON.parse(sessionStorage.getItem('permData'));
            let allBtnInfoArr = [];
            allBtnInfoArr = permDataInfo.buttonEntitySet;
            if (allBtnInfoArr.length > 0) {
                let btnPowerArr = allBtnInfoArr.map(item => item.buttonName);
                //判断指定页面v-hasBtn的按钮是否有权限
                if (btnPowerArr.includes(bindVal)) {
                    isExist = true;
                }
            }

            return isExist;

        };

    }
};

export default hasBtnPower;






















